<script setup lang="ts">
import {ref} from 'vue'
import {getTableList} from '@/mock';
// 筛选项信息
const formValue = ref({});

/**
 * 使用el-table自带的索引功能处理显示的值
 * @param index
 */
const indexMethod = (index: number) => {
  return index * 2
}

const formTableProps = ref({
  searchForm: {
    searchList: [
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        devAttrs: {
          placeholder: '请输入姓名'
        }
      },
      {
        label: '年龄',
        key: 'age',
        type: 'input',
        devAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ],
    elFormAttrs: {
      labelWidth: '60'
    },
    formValue
  },
  searchTable: {
    columns: [
      {
        label: '姓名',
        prop: 'name',
        width: '200',
        align: 'center',
      },
      {
        label: '年龄',
        prop: 'age',
        minWidth: '200',
        align: 'center',
      },
      {
        label: '入学时间',
        dataType: 'time',
        prop: 'entryTime',
        width: '200',
        align: 'center',
      },
      {
        label: '学杂费',
        dataType: 'money',
        prop: 'fee',
        width: '200',
        align: 'center',
      },
      {
        label: '当前行数据',
        prop: 'data',
        align: 'center',
        width: '400'
      }
    ],
    openIndex: true,// 使用devecoui自己封装的索引功能(也就是当前示例中的序号)
    query: formValue,
    api: getTableList,
    elTableAttrs: {
      'scrollbar-always-on': true
    }
  }
});
</script>

<template>
  <dev-form-table
      v-bind="formTableProps"
      ref="devElFormTableRef">
    <template #data="{row}">
      {{row}}
    </template>
  </dev-form-table>
</template>
